<template>
    <div class="common-page page-stats-attendance-team" v-loading.fullscreen="loading">
        <div class="common-page__head">
            <!-- <comp-paths class="route" :paths="['/stats', $route.fullPath]"></comp-paths> -->
            <div class="title">
                <div class="text">{{ $options.title }}</div>
                <el-date-picker type="date" v-model="startTime" size="small" style="margin-right: 12px; width: 200px" format="起始yyyy年M月d日" value-format="timestamp" placeholder="起始日期" :readonly="loading" @change="search()"></el-date-picker>
                <el-date-picker type="date" v-model="endTime" size="small" style="margin-right: 12px; width: 200px" format="截止yyyy年M月d日" value-format="timestamp" placeholder="截止日期" :readonly="loading" @change="search()"></el-date-picker>
                <el-button type="plain" size="small" icon="el-icon-top" @click="setTeam()" v-if="cityId">返回上一级</el-button>
            </div>
        </div>
        <div class="common-page__body page-stats-attendance-team__body">
            <div class="row">
                <div class="col col--2em">排名</div>
                <div class="col">
                    <span v-if="cityId">工作分队</span>
                    <span v-else>工作队</span>
                </div>
                <div class="col col--4em">走访总数</div>
            </div>
            <div class="row" v-for="(team, index) in teamList" :key="team.id">
                <div class="col col--2em">
                    <span v-if="team.stats.attendancesTotal > 0">{{ index + 1 }}</span>
                    <span v-else>-</span>
                </div>
                <div class="col" v-if="cityId">{{ team.name }}</div>
                <div class="col col--click" @click="setTeam(team)" v-else>
                    <span class="key">{{ team.name }}</span>
                </div>
                <div class="col col--4em">{{ team.stats.attendancesTotal }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int, findValue } from "../util";
    export default {
        name: "page-stats-attendance-team",
        title: "走访排名-工作队",
        nodes: ["/menu/stats"],
        childs: [],
        mixins: [mixin],
        data: () => ({
            loading: false,
            cityId: "",
            startTime: null,
            endTime: null,
            teamList: [],
        }),
        methods: {
            setTeam(team) {
                if (this.loading) return;
                this.cityId = team ? team.cityId : "";
                this.search(true);
            },
            search(clean) {
                if (this.loading) return;
                if (clean) this.teamList = [];
                let cityId = this.cityId;
                let startTime = this.startTime;
                let endTime = this.endTime;
                this.loading = true;
                this.plugins.user.getStatsAttendanceTeam({ cityId, startTime, endTime }).then((res) => {
                    this.loading = false;
                    if (res.code === 0) {
                        let list = res.data.map((data) => ({
                            id: string(data.deptId),
                            type: findValue(this.env.deptTypes, "id", string(data.deptType), "value", ""),
                            name: string(data.deptName),
                            cityId: string(data.cityId),
                            countyId: string(data.areaId),
                            stats: {
                                attendancesTotal: int(data.countAll),
                            },
                        }));
                        for (let data of list) {
                            let type = data.type;
                            let cityId = data.cityId;
                            let countyId = data.countyId;
                            let stats = data.stats;
                            if (this.cityId) break;
                            if (type === "team" && cityId && !countyId) {
                                stats.attendancesTotal = list.reduce((total, data) => {
                                    if (data.cityId === cityId) total += data.stats.attendancesTotal;
                                    return total;
                                }, 0);
                            }
                        };
                        this.teamList = list.filter((data) => {
                            if (this.cityId) return data.cityId === this.cityId;
                            return data.type === "team" && data.cityId && !data.countyId;
                        }).sort((a, b) => {
                            let a1 = a.stats.attendancesTotal;
                            let b1 = b.stats.attendancesTotal;
                            return b1 - a1;
                        });
                    } else {
                        this.plugins.modal.toast("加载失败<br>" + res.code + "：" + res.msg, "error");
                    }
                });
            },
            destroy() {
                if (this.loading) return;
                return true;
            },
            init() {
                if (this.loading) return;
                this.loading = true;
                this.$root.$refs.navbar.init();
                this.plugins.user.call(async () => {
                    let res = await this.plugins.user.init();
                    if (res.code === 0) { }
                    return res;
                }, async () => {
                    if (this.access(this.$route.name)) return { code: 0 };
                    return this.env.xhrErrors.find((error) => error.code === 4);
                }).then((res) => {
                    this.loading = false;
                    this.$root.$refs.navbar.init();
                    if (res.code === 0) {
                        this.search();
                    } else if (res.code === 2) {
                        this.$root.$refs.navbar.login();
                    } else {
                        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error").then(() => this.$router.replace("/home"));
                    }
                });
            },
        },
    };
</script>

<style lang="scss">
    .page-stats-attendance-team {
        overflow: hidden;
    }

    .page-stats-attendance-team__body {
        display: flex;
        flex-direction: column;

        & > .row {
            flex: 0 0 auto;
            display: flex;
            width: 640px;

            & > .col {
                flex: 1 1 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: 0 2px 2px 0;
                padding: 8px 9px;
                color: #333;
                font-size: 14px;
                line-height: 16px;
                text-align: center;
                background-color: #f6f6f6;

                & > .key {
                    color: #1677ff;
                }
            }

            & > .col--click {
                cursor: pointer;
            }

            & > .col--2em {
                flex: 0 0 auto;
                width: 2em;
            }

            & > .col--3em {
                flex: 0 0 auto;
                width: 3em;
            }

            & > .col--4em {
                flex: 0 0 auto;
                width: 4em;
            }

            &:first-child {
                & > .col {
                    font-weight: bold;
                }
            }
        }
    }
</style>